<template>
	<scroll-view class="scroll-list " scroll-y="true" style="height: 100%;width: 100%;">
		<view class="flow-group" v-for="(item, index) of list" :key="item.cateId" v-if="list.length">
			<view class="title flex flex-center">
				<view class="tag">
				</view>
				{{ item.cateName }}
			</view>
			<view class="item-list">
				<view v-for="ext in item.extensionInfoList" :key="ext.id" class="flow-item"
					  @click="startFlow(ext.formKey)">
					<view :style="{backgroundColor: ext.color}" class="icon">
						<text class="ele " :class="[getIcon(ext.icon)]"></text>
					</view>
					<view class="item-name">
						{{ ext.name }}
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else/>
	</scroll-view>
</template>

<script>
import UEmpty from "../../uview-ui/components/u-empty/u-empty.vue";

export default {
	components: {UEmpty},
	data() {
		return {
			query: {},
			list: [],
		};
	},
	created() {
		this.loadList()
	},
	methods: {
		getIcon(icon) {
			if (!icon) {
				return
			}
			return icon.replace(/([A-Z])/g, "$1").replace('icon-', '').toLowerCase()
		},
		onRefresh() {

		},
		loadList() {
			uni.showLoading({
				title: '加载中...'
			})
			this.$u.api.workflow.allowedInitiatorList(this.query).then(res => {
				if (res) {
					this.list = res.map(item => {
						item.icon = this.getIcon(item.icon)
						return item
					});
					console.log(this.list)
				}
				uni.hideLoading();
			});
		},
		search(value) {
			this.list = [];
			this.query.current = 0;
			this.loadList();
		},
		startFlow(formKey) {
			uni.navigateTo({
				url: '/pages/form/write/index?formKey=' + formKey
			})
		},
	}
};
</script>
<style lang="scss">

page {
	background-color: $u-bg-color;
}
</style>
<style lang="scss" scoped>
page {
	height: 100%;
	background-color: $u-bg-color;
}

.scroll-list {
	background-color: #FFFFFF;
	border-radius: 10rpx;
}

.flow-group {
	display: flex;
	flex-direction: column;

	.item-list {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		width: 8rpx;
		height: 30rpx;
		background-color: #D1D1D1;
		margin-right: 15rpx;
		border-radius: 8rpx;
	}

	.flow-item {
		display: flex;
		width: 28%;
		font-size: 18rpx;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin: 16rpx;


		.icon {
			width: 92rpx;
			height: 92rpx;
			border-radius: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			align-content: center;
			flex-direction: row;
			color: #FFFFFF;
			font-size: 60rpx;
		}

		.item-name {
			line-height: 36rpx;
			// 超出省略
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
		}
	}
}

</style>
